<template>
  <div class="account-create-wrap">
    <createTop firstMenu="系统设置" secondMenu="角色列表" :title="pageName"></createTop>

    <el-card shadow="always" v-loading="loading">
      <div class="content">
        <div class="content-title">角色 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" v-model="role" placeholder="请输入内容"></el-input>

        <div class="content-title">显示名称 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" align="left" v-model="display_name" placeholder="请输入内容"></el-input>

        <div class="content-title">描述 <span class="red-icon">※</span> </div>
          <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>

        <div class="content-title">权限 <span class="red-icon">※</span> </div>
        <el-tree
          class="tree"
          :data="permission"
          :props="rule"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-checked-keys="defaultKey"
          >
        </el-tree>

      </div>
      <saveBtn @confirm="confirm"></saveBtn>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class RoleCreate extends Vue {
  $refs!: any;
  pageName: string = '';
  secondMenu: string = '';
  permissionRes!: ajaxResquest;
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;

  permission: any[] = [];
  role: string = '';
  display_name: string = '';
  remark: string = '';
  loading: boolean = false;
  arriveName: string = 'accountList';
  checkList: any[] = [];
  id!: string;
  rule: object = {
    children: 'data',
    label: 'name'
  };
  defaultKey: any[] = [];

  outAuth: any[] = [];
  mounted() {
    if (this.$route.query.edit) {
      this.pageName = '编辑角色';
      this.infoRes = new ajaxResquest('/system/role/roleinfo');
      this.id = this.$route.query.id;
      this.getInfo();
    } else {
      this.pageName = '新增角色';
    }
    this.permissionRes = new ajaxResquest('/system/role/roleinfo');
    this.createRes = new ajaxResquest('/system/role/roleaddtodo');
    this.permissionRes.getFunction().then((res:any) => {
      this.permission = res.data.data.auth;
      let temp = res.data.data.auth;
      temp.map((i: any) => {
        this.outAuth.push(i.id);
      });
      console.log(this.outAuth);
    });
  }
  getInfo() {
    this.infoRes.getFunction({ role_id: this.id }).then((res: any) => {
      if (res.data.code === 1) {
        this.display_name = res.data.data.types.info.data[0].display_name;
        this.role = res.data.data.types.info.data[0].role;
        this.remark = res.data.data.types.info.data[0].remark
          ? res.data.data.types.info.data[0].remark
          : '';

        let temp = res.data.data.auth;
        let tempArray: any[] = [];
        temp.forEach((i: any) => {
          if (i.have === 1) {
            // tempArray.push(i.id);
          }
          if (i.data.length > 0) {
            i.data.forEach((j: any) => {
              if (j.have === 1) {
                tempArray.push(j.id);
              }
            });
          }
        });
        console.log(tempArray);

        this.defaultKey = tempArray;
      }
    });
  }

  confirm(): void {
    let permissionArray: any[] = this.$refs.tree.getCheckedNodes();
    let finalArray: any = [];
    if (permissionArray.length > 0) {
      permissionArray.forEach(i => {
        console.log(typeof i.id);

        finalArray.push(i.id);
      });
    }
    // 根据id添加母菜单id
    if (
      finalArray.includes(2) ||
      finalArray.includes(3) ||
      finalArray.includes(4)
    ) {
      finalArray.push(1);
    }
    if (finalArray.includes(6)) {
      finalArray.push(5);
    }
    if (
      finalArray.includes(8) ||
      finalArray.includes(9) ||
      finalArray.includes(10) ||
      finalArray.includes(11) ||
      finalArray.includes(12) ||
      finalArray.includes(13) ||
      finalArray.includes(14)
    ) {
      finalArray.push(7);
    }
    if (
      finalArray.includes(38) ||
      finalArray.includes(16) ||
      finalArray.includes(17) ||
      finalArray.includes(18)
    ) {
      finalArray.push(15);
    }
    if (
      finalArray.includes(20) ||
      finalArray.includes(21) ||
      finalArray.includes(22) ||
      finalArray.includes(23) ||
      finalArray.includes(24) ||
      finalArray.includes(25)
    ) {
      finalArray.push(19);
    }
    if (
      finalArray.includes(27) ||
      finalArray.includes(28) ||
      finalArray.includes(29) ||
      finalArray.includes(30)
    ) {
      finalArray.push(26);
    }
    if (
      finalArray.includes(32) ||
      finalArray.includes(33) ||
      finalArray.includes(34) ||
      finalArray.includes(35) ||
      finalArray.includes(36) ||
      finalArray.includes(37)
    ) {
      finalArray.push(31);
    }
    // finalArray = JSON.stringify(finalArray);
    // return
    if (finalArray.length === 0) {
      this.$message.error('没有选择任何权限!');
      return;
    }
    if(!this.remark){
      this.$message.error('描述不能为空!')
      return
    }
    let data: any = {
      role: this.role,
      auth: JSON.stringify(finalArray),
      display_name: this.display_name,
      remark: this.remark
    };
    // data = JSON.stringify(data);
    if (this.$route.query.id) {
      data = { ...data, role_id: this.$route.query.id };
    }
    this.createRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.$to('roleList');
      }
    });
  }
}
</script>
<style lang="less">
.account-create-wrap {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  .el-card {
    overflow-y: auto;
  }
  .content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  // .el-checkbox {
  //   margin: 2px 0 !important;
  //   width: 130px;
  // }
  .tree {
    width: 200px;
  }
}
</style>
